<template>
  <div class="comments">
    <p><el-link icon="el-icon-edit">期待你的评论</el-link></p>
    <ul class="subscribe">
      <li v-for="(item,index) in enddata" :key="index">
        <div class="top">
          <el-link type="success">伍仁行家政</el-link>
        </div>
        <div class="center">
          <el-image
            style="width: 100%; height: 100%"
            :src="url"
            :preview-src-list="srcList"
          >
          </el-image>
          <div class="minimain">
              <div class="minimainbox">
         <el-link type="success">评分</el-link><el-rate v-model="value" show-text> </el-rate>
         <el-link type="danger">内容</el-link>
    <el-checkbox-group v-model="checkboxGroup1">
      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
    </el-checkbox-group>
              </div>
              <div class="minimainbox">
                  <el-link type="success">你的留言</el-link>
                 <el-input
  type="textarea"
  :rows="3"
  placeholder="请输入内容"
  v-model="textarea">
</el-input> 
<el-button type="success" round @click="comments(item.work_id)">提交评论</el-button>
              </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {

  data() {
    return {
      textarea: '',
      value: null,
      url:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3035184011,4060465026&fm=26&gp=0.jpg',
      srcList: [
          'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1799342516,3753463079&fm=26&gp=0.jpg',
        ],
      checkboxGroup1: ['很专业'],
     cities:['很专业', '服务态度好', '效率高', '会二次选择我们'],  
    };
  },
  computed:{
    ...mapState(['enddata'])
  },
  methods:{
    comments(val){
      let token = localStorage.getItem("token");
      this.myaxios({
        url: "http://housekeepi.com/api/workModify",
        method: "post",
        data: {
          token: String(token),
          work_id: String(val),
          state: '9',
        },
      })
        .then((e) => {
          console.log(e);
        })
        .catch(() => {
          console.log("error");
        });
    }
  }
};
</script>

<style scoped>
*{
  text-align: center;
}
.minimainbox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.subscribe {
  list-style: none;
  padding: 20px;
}
.subscribe li {
  padding: 10px 15px;
  border-top: 5px solid #eee;
}
.subscribe li .top {
  display: flex;
  justify-content: space-between;
}
.subscribe li .center {
  padding: 15px 0;
  display: grid;
  grid-template-columns: 20% 70%;
  grid-gap: 20px;
  border-bottom: 1px solid #333;
}
.minimain{
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(2,1fr);
}
.el-button{
    margin-top: 40px;
}
</style>